<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amMap example</title>
        <link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="../ammap/ammap.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">

        <script src="../ammap/ammap.js" type="text/javascript"></script>
        <!-- map file should be included after ammap.js -->
		<script src="../ammap/maps/js/worldLow.js" type="text/javascript"></script>
        <!-- theme files. you only need to include the theme you use.
             feel free to modify themes and create your own themes -->
        <script src="../ammap/themes/light.js" type="text/javascript"></script>
        <script src="../ammap/themes/dark.js" type="text/javascript"></script>
        <script src="../ammap/themes/black.js" type="text/javascript"></script>
        <script src="../ammap/themes/chalk.js" type="text/javascript"></script>

        <script>

         // in order to set theme for a chart, all you need to include theme file
         // located in amcharts/themes folder and set theme property for the chart.

        var map;
        makeMap("light", "#FFFFFF");

        // Theme can only be applied when creating chart instance - this means
        // that if you need to change theme at run time, youhave to create whole
        // chart object once again.

        function makeMap(theme, bgColor, bgImage) {

        	if (map) {
        		map.clear();
        	}

        	// background
        	if(document.body){
	        	document.body.style.backgroundColor = bgColor;
	        	document.body.style.backgroundImage = "url(" + bgImage + ")";
        	}

        	map = AmCharts.makeChart("mapdiv", {
        		type: "map",
        		theme: theme,

                creditsPosition: "top-right",

        		dataProvider: {
        			map: "worldLow",
        			zoomLevel: 3.5,
        			zoomLongitude: 10,
        			zoomLatitude: 52,
        			areas: [{
        					title: "Austria",
        					id: "AT",
        					color: "#3366CC",
        					customData: "1995",
        					groupId: "before2004"
        				}, {
        					title: "Ireland",
        					id: "IE",
        					color: "#3366CC",
        					customData: "1973",
        					groupId: "before2004"
        				}, {
        					title: "Denmark",
        					id: "DK",
        					color: "#3366CC",
        					customData: "1973",
        					groupId: "before2004"
        				}, {
        					title: "Finland",
        					id: "FI",
        					color: "#3366CC",
        					customData: "1995",
        					groupId: "before2004"
        				}, {
        					title: "Sweden",
        					id: "SE",
        					color: "#3366CC",
        					customData: "1995",
        					groupId: "before2004"
        				}, {
        					title: "Great Britain",
        					id: "GB",
        					color: "#3366CC",
        					customData: "1973",
        					groupId: "before2004"
        				}, {
        					title: "Italy",
        					id: "IT",
        					color: "#3366CC",
        					customData: "1957",
        					groupId: "before2004"
        				}, {
        					title: "France",
        					id: "FR",
        					color: "#3366CC",
        					customData: "1957",
        					groupId: "before2004"
        				}, {
        					title: "Spain",
        					id: "ES",
        					color: "#3366CC",
        					customData: "1986",
        					groupId: "before2004"
        				}, {
        					title: "Greece",
        					id: "GR",
        					color: "#3366CC",
        					customData: "1981",
        					groupId: "before2004"
        				}, {
        					title: "Germany",
        					id: "DE",
        					color: "#3366CC",
        					customData: "1957",
        					groupId: "before2004"
        				}, {
        					title: "Belgium",
        					id: "BE",
        					color: "#3366CC",
        					customData: "1957",
        					groupId: "before2004"
        				}, {
        					title: "Luxembourg",
        					id: "LU",
        					color: "#3366CC",
        					customData: "1957",
        					groupId: "before2004"
        				}, {
        					title: "Netherlands",
        					id: "NL",
        					color: "#3366CC",
        					customData: "1957",
        					groupId: "before2004"
        				}, {
        					title: "Portugal",
        					id: "PT",
        					color: "#3366CC",
        					customData: "1986",
        					groupId: "before2004"
        				}, {
        					title: "Lithuania",
        					id: "LT",
        					color: "#FFCC33",
        					customData: "2004",
        					groupId: "2004"
        				}, {
        					title: "Latvia",
        					id: "LV",
        					color: "#FFCC33",
        					customData: "2004",
        					groupId: "2004"
        				}, {
        					title: "Czech Republic ",
        					id: "CZ",
        					color: "#FFCC33",
        					customData: "2004",
        					groupId: "2004"
        				}, {
        					title: "Slovakia",
        					id: "SK",
        					color: "#FFCC33",
        					customData: "2004",
        					groupId: "2004"
        				}, {
        					title: "Slovenia",
        					id: "SI",
        					color: "#FFCC33",
        					customData: "2004",
        					groupId: "2004"
        				}, {
        					title: "Estonia",
        					id: "EE",
        					color: "#FFCC33",
        					customData: "2004",
        					groupId: "2004"
        				}, {
        					title: "Hungary",
        					id: "HU",
        					color: "#FFCC33",
        					customData: "2004",
        					groupId: "2004"
        				}, {
        					title: "Cyprus",
        					id: "CY",
        					color: "#FFCC33",
        					customData: "2004",
        					groupId: "2004"
        				}, {
        					title: "Malta",
        					id: "MT",
        					color: "#FFCC33",
        					customData: "2004",
        					groupId: "2004"
        				}, {
        					title: "Poland",
        					id: "PL",
        					color: "#FFCC33",
        					customData: "2004",
        					groupId: "2004"
        				}, {
        					title: "Romania",
        					id: "RO",
        					color: "#66CC99",
        					customData: "2007",
        					groupId: "2007"
        				}, {
        					title: "Bulgaria",
        					id: "BG",
        					color: "#66CC99",
        					customData: "2007",
        					groupId: "2007"
        				}
        			]
        		},

        		areasSettings: {
        			balloonText: "[[title]] joined EU at [[customData]]"
        		},


        		legend: {
        			width: "100%",
        			bottom: 15,
        			left: 15,
        			horizontalGap: 10,
        			data: [{
        				title: "Joined EU before 2004",
        				color: "#3366CC"
        			}, {
        				title: "Joined EU at 2004",
        				color: "#FFCC33"
        			}, {
        				title: "Joined EU at 2007",
        				color: "#66CC99"
        			}]
        		}

        	});
        }

        </script>
    </head>

    <body style="font-size:15px;">Select theme:
        <a href="#" onclick="makeMap('light', '#ffffff');">Light</a> |
        <a href="#" onclick="makeMap('dark', '#282828')">Dark</a> |
        <a href="#" onclick="makeMap('black', '#222222')">Black</a> |
        <a href="#" onclick="makeMap('chalk', '#282828', 'images/board.jpg')">Chalk</a>
        <br><br>
        <div id="mapdiv" style="width: 800px; height: 500px;"></div>
    </body>

</html>